<template>
	<div class="pages">
		<div class="item_totle">
			<div class="item bor_left">
				<div class="tit1">创制券使用额度（元）</div>
				<div class="money">{{dataForm.total_coupons_num || 0}}</div>
			</div>
			<div class="item">
				<div class="tit1">创制券剩余额度（元）</div>
				<div class="money">{{dataForm.shengyu|| 0}}</div>
			</div>
		</div>
		<div class="item_num">
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content">
						<img src="@/assets/img/to1.png" alt="" width="60" height="60" />
						<div class="item">
							<div class="item1">工厂数量</div>
							<div class="item2">{{dataForm.factory_num}}</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<img src="@/assets/img/to2.png" alt="" width="60" height="60" />
						<div class="item">
							<div class="item1">企业数量</div>
							<div class="item2">{{dataForm.corp_num}}</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<img src="@/assets/img/to3.png" alt="" width="60" height="60" />
						<div class="item">
							<div class="item1">需求数量</div>
							<div class="item2">{{dataForm.total_xuqiu}}</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<img src="@/assets/img/to4.png" alt="" width="60" height="60" />
						<div class="item">
							<div class="item1">合同数量</div>
							<div class="item2">{{dataForm.total_yiqian}}</div>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin-top: 20px;">
				<el-col :span="6">
					<div class="grid-content">
						<img src="@/assets/img/to5.png" alt="" width="60" height="60" />
						<div class="item">
							<div class="item1">设计研发需求</div>
							<div class="item2">{{dataForm.level_1_orders}}</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<img src="@/assets/img/to6.png" alt="" width="60" height="60" />
						<div class="item">
							<div class="item1">物资采购需求</div>
							<div class="item2">{{dataForm.level_2_orders}}</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<img src="@/assets/img/to7.png" alt="" width="60" height="60" />
						<div class="item">
							<div class="item1">生产加工需求</div>
							<div class="item2">{{dataForm.level_3_orders}}</div>
						</div>
					</div>
				</el-col>
				<el-col :span="6"></el-col>
			</el-row>
		</div>
		<div class="item_chart">
			<div class="item_part">
				<div id="main_charts1" style="height: 300px;"></div>
			</div>
			<div class="item_part" style="margin: 0 20px;">
				<div id="main_charts2" style="height: 300px;"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from "echarts";
	export default {
		data() {
			return {
				dataForm: {
					corp_num: 0,
					factory_num: 0,
					level_1_orders: 0,
					level_2_orders: 0,
					level_3_orders: 0,
					total_coupons_num: 0,
					total_xuqiu: 0,
					total_yiqian: 0
				}
			}
		},
		methods: {
			myEcharts() {
				var myChart1 = echarts.init(document.getElementById('main_charts1'));
				var myChart2 = echarts.init(document.getElementById('main_charts2'));
				//配置图表
				var option1 = {
					title: {
						text: '创制券数量',
						left: 'left'
					},
					tooltip: {
						trigger: 'item'
					},

					series: [{
						name: '创制券数量',
						type: 'pie',
						// radius: ['80%','10%'],
						data: [{
								value: this.dataForm.level_1_orders,
								name: '设计研发需求'
							},
							{
								value: this.dataForm.level_2_orders,
								name: '物资采购需求'
							},	{
								value: this.dataForm.level_3_orders,
								name: '生产加工需求'
							},
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 1,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				var option2 = {
					title: {
						text: '创制券金额',
						left: 'left'
					},
					tooltip: {
						trigger: 'item'
					},

					series: [{
						name: '物资采购需求',
						type: 'pie',
						// radius: ['80%','10%'],
						data: [{
								value: this.dataForm.level1_coupons_num,
								name: '设计研发需求'
							},
							{
								value: this.dataForm.level2_coupons_num,
								name: '物资采购需求'
							},{
								value: this.dataForm.level3_coupons_num,
								name: '物资采购需求'
							}
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				myChart1.setOption(option1);
				myChart2.setOption(option2);
			},
			getInfo(){
				this.$loading()
				this.$http.post('/api/tongji/tongji', {}).then(res => {
					this.$closeLoading()
					this.dataForm = {
						...this.dataForm,
						...res.result
					}
						this.myEcharts();
				})
			},
		},
		created() {
			this.getInfo()
		},
		mounted() {
		
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		background: transparent;
		padding: 0;
	}

	.item_totle {
		background-color: #fff;
		display: flex;
		padding: 58px 0;

		.item {
			flex: 1;
			text-align: center;

			.tit1 {
				font-weight: 400;
				font-size: 16px;
				color: #333333;
				line-height: 22px;
			}

			.money {
				font-weight: 800;
				font-size: 36px;
				color: #333333;
				line-height: 49px;
				margin-top: 12px;
			}
		}

		.bor_left {
			border-right: 1px solid #DCDFE6;
		}
	}

	.item_num {
		background-color: #fff;
		padding: 20px;
		margin-top: 20px;
	}

	.item_chart {
		display: flex;
		width: 100%;
		margin-top: 20px;

		.item_part {
			flex: 1;
			background-color: #fff;
			padding: 20px;
		}
	}

	.grid-content {
		background: #F6F7FA;
		border-radius: 6px;
		display: flex;
		align-items: center;
		padding-left: 40px;
		padding-top: 30px;
		padding-bottom: 30px;

		.item {
			text-align: left;
			padding-left: 27px;

			.item1 {
				font-weight: 400;
				font-size: 15px;
				color: #333333;
				line-height: 21px;
				font-style: normal;
			}

			.item2 {
				font-weight: 600;
				font-size: 24px;
				color: #333333;
				line-height: 33px;
				font-style: normal;
				margin-top: 7px;
			}
		}
	}
</style>